<template>
  <div>
    <p>props.name: {{ name }}</p>
    <p>props.name: {{ info }}</p>
    <p>props.name: {{ list }}</p>
    <p>data.a: {{ a }}</p>
    <p>
      <button @click="handleBChange">change data.b</button>
    </p>
  </div>
</template>

<script>
export default {
  props: {
    name: String,
    info: Object,
    list: Array,
  },
  data() {
    return {
      a: "hello",
      b: "world",
    };
  },
  updated() {
    console.log("触发 PropAndData updated");
  },
  methods: {
    handleBChange() {
      // 模板中并没有用到 b，故当其更改时，并不会通知组件更新
      this.b = "Vue" + Date.now();
      console.log("data.b 发生了变化，但并没有触发组件的更新", this.b);
    },
  },
};
</script>
